<template>
  <div class="character" :style="characterStyle">
    <div class="character-body"></div>
  </div>
</template>

<script>
export default {
  name: 'Character',
  props: {
    position: {
      type: Object,
      required: true
    },
    rotation: {
      type: Number,
      default: 0
    },
    state: {
      type: String,
      default: 'standing' // standing, jumping, falling
    }
  },
  computed: {
    characterStyle() {
      return {
        left: this.position.x + 'px',
        top: this.position.y + 'px',
        transform: `translate(-50%, -50%) rotate(${this.rotation}deg)`,
        transition: this.state === 'jumping' ? 'none' : 'left 0.1s linear, top 0.1s linear, transform 0.1s linear'
      }
    }
  }
}
</script>

<style scoped>
.character {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.character-body {
  width: 100%;
  height: 100%;
  background: #FF5722;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.character.jumping .character-body {
  background: #FF9800;
}

.character.falling .character-body {
  background: #F44336;
}
</style>